<template>
	<div class="hello">

		<el-form ref="form" :model="form" label-width="80px" label-position='top'>
			<div class="zsK">
				<div style="width:60%; margin: 0 auto;" class="">
					<p>选择或新建知识库</p>
					<el-select style="width: 100%;" v-model="form.zsk" placeholder="请选择" @change="changeCombined">
						<el-option v-for="item in combinedArray" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
					<div v-if="creatZsk" class="">
						新增数据库
					</div>
					<div v-else class="">
						<p>上传知识文件：</p>
						<el-upload class="upload-demo" :before-upload="beforeAvatarUpload" drag
							action="https://jsonplaceholder.typicode.com/posts/" multiple>
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							<div class="el-upload__tip" slot="tip">Limit 200MB per file • HTML, HTM, MHTML, MD, JSON, JSONL,
								CSV, PDF, DOCX, DOC, PPT, PPTX, PNG, JPG, JPEG, BMP, EML, MSG, RST, RTF, TXT, XML, EPUB,
								ODT, TSV, EML, MSG, EPUB, XLSX, XLS, XLSD, IPYNB, ODT, PY, RST, RTF, SRT, TOML, TSV, DOCX,
								DOC, XML, PPT, PPTX, ENEX</div>
						</el-upload>
						
						<p>请输入知识库介绍</p>
						<el-input style="margin-bottom: 20px;" type="textarea" :rows="2" placeholder="请输入内容"
							v-model="textarea">
						</el-input>
						
						<el-collapse v-model="activeNames" @change="handleChange">
							<el-collapse-item title="文件处理配置" name="1">
								<div class="hfGG" style=" display: grid;grid: 30px / auto auto auto;padding: 0 20px;">
									<div class="">
										<p>单段文本最大长度：</p>
									</div>
									<div class="">
										<p>相邻文本重合长度：</p>
									</div>
									<div class="">
						
									</div>
									<div class="">
										<el-input-number v-model="form.maxnum" controls-position="right"
											@change="handleChange" :min="1" :max="10"></el-input-number>
									</div>
									<div class="">
										<el-input-number v-model="form.minnum" controls-position="right"
											@change="handleChange" :min="1" :max="10"></el-input-number>
									</div>
									<div class="" style="display: flex;align-items: center">
										<el-checkbox v-model="checked">开启中文标题加强</el-checkbox>
						
									</div>
						
								</div>
						
							</el-collapse-item>
						</el-collapse>
						<el-button type="primary" disabled>添加文件到知识库</el-button>
						<p>知识库 <span style="color:lawngreen;">{{form.zsk}}</span>中已有文件:</p>
						<p style="padding: 20px 10px;background: #a0d1ed2b;border-radius: 10px;">知识库中包含源文件与向量库,请从下表中选择文件后操作
						</p>
						<el-table :data="zskTableData" stripe style="width: 100%">
							<el-table-column label="序列" align="center" type="index" width="50">
							</el-table-column>
									
							<el-table-column sortable align="center"  prop="name" label="文档名称" >
							</el-table-column>
							<el-table-column sortable prop="address" label="文档加载器">
							</el-table-column>
						</el-table>
					</div>
					
				</div>


			</div>
		</el-form>
	</div>
</template>

<script>
	import {
		getZskOptions,
		getknowledgeList
	} from '../api/chat.js'
	export default {
		name: 'HelloWorld',
		props: {
			msg: String
		},
		data() {
			return {
				creatZsk:false,
				activeNames:1,
				checked:false,
				textarea:'',
				zskTableData: [],
				zskOptions: [],
				fixedArray: [{
					value: '0',
					label: '新建知识库'
				}],
				form: {
					zsk: '',
					minnum: 50,
					maxnum: 250,
				}
			}
		},
		computed: {
			combinedArray() {
				return [...this.zskOptions, ...this.fixedArray];
			}
		},

		created() {
			getZskOptions().then((res) => {
				let res_2 = JSON.parse(JSON.stringify(res))
				if (res_2.code == 200) {

					let optionsObjectArray = res_2.data.map((label, index) => ({
						value: label, // 假设你想要从 1 开始的索引作为 value  
						label: label
					}));

					this.zskOptions = optionsObjectArray
					this.form.zsk = this.zskOptions[0].value
					getknowledgeList({
						knowledge_base_name: this.zskOptions[0].value
					}).then((res) => {
						if (res.code == 200) {
							this.zskTableData = res.data.map((label, index) => ({
								name: label, // 假设你想要从 1 开始的索引作为 value  

							}))
						}
					})
				}
			})
		},
		methods: {
			handleChange(a){
				
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 200;

				if (!isLt2M) {
					this.$message.error('文件大小不能超过 200MB!');
				}
				return
			},
			changeCombined(a){
				if(a==0){
					this.creatZsk = true
				}else{
					this.creatZsk = false
				}
			}
		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.zsK {
		width: 75%;
		color: aliceblue;
		display: flex;
		flex-flow: column;
		align-items: center;
		padding: 20px 30px;
		height: 95vh;
		overflow: auto;
	}

</style>